<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<style>
			/*整个网页的背景变成蓝色*/
			body {
				background-color: skyblue;
			}
			
			.loginDiv{
				width: 550px;
				height: 530px;
				background-color: white;
				/*让div整体居中*/
				margin: 0 auto;
				/*调整div顶端外边距*/
				margin-top:80px;
				/*调整div顶端内边距*/
				padding-top: 30px;
				/*让div内部的东西整体居中*/
				text-align: center;
			}
			
			.loginInput{
				width: 426px;
				height: 55px;
				/*调整文本框样式为圆弧形*/
				border-radius: 5px;
				/*调整文本边框粗细与颜色*/
				border: 1px solid darkgray;
				/*调整文本框底部外边距*/
				margin-bottom: 20px;
				/*调整文本框左侧内边距*/
				padding-left: 30px;
				/*调整文本框背景色为透明*/
				background-color: transparent;
				/*将文本框向左移动*/
				margin-left: -25px;
			}
			
			.loginBtn{
				width: 453px;
				height: 55px;
				background-color: #FF6B4D;
				color: white;
				font-size: 20px;
				border-radius: 5px;
				/*去掉边框*/
				border: none;
			}
			
			.thirdLogin{
				margin-top: 30px;
				margin-bottom: 15px;
			}
			
			.logpic{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="loginDiv">
			<!-- 让div里的东西文字对齐方式为居中对齐-->
			<div style="text-align: center;">
				<img src="img/tyustlogo.png" width="250px"/>
			</div>
			<h2>毕业设计管理系统</h2>
			<div>
				<img src="img/user.png"> <input class="loginInput" type="text" placeholder="请输入用户名">
				<br>
				<img src="img/password.png"><input class="loginInput" placeholder="密码" type="password"/>
				<br>
				<input class="loginBtn" type="submit" value="登录">
			</div>
			<!-- 这里放第三方登录的东西 -->
			<div class="thirdLogin">
				<img class="logpic" src="img/weixin.png"/>
				<img class="logpic" src="img/qq.png"/>
				<img class="logpic" src="img/weibo.png"/>
			</div>
			<div style="font-size:12px;line-height:20px;">
				技术支持：太原科技大学 宋书记<br>
				开发者：太原工业学院 王主任
			</div>
		</div>
	</body>
</html>